<template>
  <div class="chars_box">
    <div class="flex flex-wrap w-[100%] h-[30%] pt-15" style="background-color: #15181f">
      <div
        v-for="(item, index) in ChartData26"
        :key="index"
        :class="[item.sign == 2 ? 'IntroductionWater2' : 'IntroductionWater']"
      >
        <p class="name">{{ item.name }}</p>
        <span
          class="unit BgqcFont"
          :style="{ color: item.color, marginLeft: item.left }"
          >{{ item.num }}
          <span class="unitson">{{ item.unit }}</span>
        </span>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ChartData26 } from "@/utils/StaticData.js";
</script>

<style scoped>
.IntroductionWater {
  width: 152px;
  height: 44px;
  padding-left: 9px;
  margin-left: 25px;
  margin-top: 42px;
  position: relative;
  background-image: url("@/assets/imgs/26-1.png");
  background-size: 100% 100%;

  .name {
    font-family: Alibaba;
    font-weight: normal;
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    top: -30px;
    left: 5px;
  }
  .unit {
    font-weight: 400;
    font-size: 23px;
    font-style: italic;
    margin-left: 40px;
    position: absolute;
    top: 10px;
    .unitson {
      color: #fff;
      font-size: 8px;
      padding: 0;
      margin: 0;
    }
  }
  .text {
    font-family: Alibaba;
    font-weight: normal;
    font-size: 8px;
    color: #69a6fa;
    position: absolute;
    top: 35px;
    right: 7px;
  }
}

.IntroductionWater2 {
  width: 152px;
  height: 44px;
  padding-left: 9px;
  margin-left: 25px;
  margin-top: 42px;
  position: relative;
  background-image: url("@/assets/imgs/26-2.png");
  background-size: 100% 100%;

  .name {
    font-family: Alibaba;
    font-weight: normal;
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    top: -30px;
    left: 5px;
  }
  .unit {
    font-weight: 400;
    font-size: 23px;
    font-style: italic;
    margin-left: 40px;
    position: absolute;
    top: 10px;
    .unitson {
      color: #fff;
      font-size: 8px;
      padding: 0;
      margin: 0;
    }
  }
  .text {
    font-family: Alibaba;
    font-weight: normal;
    font-size: 8px;
    color: #69a6fa;
    position: absolute;
    top: 35px;
    right: 7px;
  }
}
</style>
